<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="30" type="flex">
        <el-col :span="16">
          <NewCard :isright="true" title="订单列表">
            <div class="businFilter"></div>
            <template #right>
              <ComForm :config="config" :list="comForm"
            @EventReset="reset"
            @EventOnsubmit="inquireFn"
              ></ComForm>
            </template>
            <div class="businTalbe">
              <ComTable
                :config="config"
                :pagination="{
                  total: pageing.total,
                  pageNum: pageing.pageNum,
                  pageSize: pageing.pageSize,
                }"
                :list="tableData"
                :modes="tableModes"
                @EventRowClick="RowClickFn"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
              >
              </ComTable>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="10">
          <div class="infoExpert">
            <NewCard title="订单信息" v-if="infotable.type==5?false:true">
              <div class="perInfo">
                <el-row>
                  <el-col :span="24">
                    <el-descriptions title="" :column="1">
                      <el-descriptions-item label="订单类型"
                        >{{status(infotable.type)}}</el-descriptions-item
                      >
                      <el-descriptions-item label="内容类型"
                        >{{types(infotable.type)}}</el-descriptions-item
                      >
                      <el-descriptions-item label="内容标题"
                        >{{infotable.title}}</el-descriptions-item
                      >
                      <el-descriptions-item label="编辑者"
                        >{{infotable.nickname}}</el-descriptions-item
                      >
                      <el-descriptions-item label="创建时间"
                        >{{infotable.createdTime}}</el-descriptions-item
                      >
                    </el-descriptions>
                  
                  </el-col>
                  
                 
                </el-row>
              </div>
            </NewCard>
            <NewCard title="订单信息" v-else>
              <div class="perInfo">
                <el-row>
                  <el-col :span="24">
                    <el-descriptions title="" :column="1" >
                      <el-descriptions-item label="订单类型"
                        >{{types(infotable.type)}}</el-descriptions-item
                      >
                      <el-descriptions-item label="创建时间"
                        >{{infotable.createdTime}}</el-descriptions-item
                      >
                      <!-- <el-descriptions-item label="咨询方式"
                        >{{infotable.goods.consultMode.name}}</el-descriptions-item
                      > -->
                      <el-descriptions-item label="问题类型"
                        >{{infotable.nickname}}</el-descriptions-item
                      >
                      <el-descriptions-item label="专家等级"
                        >{{}}</el-descriptions-item
                      >
                      <el-descriptions-item label="服务专家"
                        >{{infotable.createdTime}}</el-descriptions-item
                      >
                      <el-descriptions-item label="咨询问题"
                        >{{infotable.goods.question}}</el-descriptions-item
                      >
                      <el-descriptions-item  label="附件"
                        ><a href="#" v-for="(value,index) in infotable.goods.files" :key="index">
                           {{value}}
                        </a>
                       
                        </el-descriptions-item
                      >
                    </el-descriptions>
                  
                  </el-col>
                  <div class="lineItem">
          
              <h3 class="el-icon-menu">{{infotable.goods.userName}}
                <span style=" font-size:14px;margin-left:5px">{{infotable.createdTime}} </span>
              </h3>
              <!-- <span class="el-icon-time"> </span> -->
              <div class="accessory">
                <p class="el-icon-time">
                 {{infotable.goods.question}}
                </p>
              </div>
              <div class="lItemContent el-icon-chat-line-square">
                123
                <!-- <AwearItem></AwearItem> -->
              </div>
              <!-- <div class="lItemContent el-icon-chat-line-square">
                用户的追加提问用户的追加提问用户的追加提问用户的追加提问用户的追加提问
              </div> -->
            </div>
                  
                 
                </el-row>
              </div>
            </NewCard>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import NewCard from "../../../components/newCard.vue";
import ComForm from "../../../components/comForm.vue";
import ComTable from "../../../components/comTable.vue";
import {getbusinessManageListApi,getbusinessManageidlist} from "../../../newApi_3-24/business/businessorder";


export default {
  name: "businessManage",
  components: { NewCard, ComForm, ComTable },
  data() {
    return {
      // 表格配置
      config: {
        isAdd: false,
        loading: false,
      },
      // 表单选项
      comForm: {
        modes: [
          {
            placeholder: "请选择订单类型",
            formType: "select",
            mode: "type",
            select: [
               {
                label: "法律",
                value: 1,
              },
              {
                label: "问答",
                value: 2,
              },
              {
                label: "头条",
                value: 3,
              },
              {
                label: "合同",
                value: 4,
              },
              {
                label: "咨询",
                value: 5,
              },
            
            ],
          },
          {
            placeholder: "请选择订单状态",
            formType: "select",
            mode: "status",
            width: 100,
             select: [
               {
              label: "已关闭",
              value: -1,
            },
            {
              label: "已完成",
              value: 0,
            },
            {
              label: "未支付",
              value: 1,
            },
            {
              label: "已支付",
              value: 2,
            },
            {
              label: "进行中",
              value: 3,
            },
            ],
          },
        ],
      },
      //详情信息存储、
      infotable: [],
      // 订单信息
      tableData: [],
      //表格数据
      tableList: [
      ],
      // 表格参数
      tableModes: [
        {
          showOverflowTooltip: true,
          width: 160,
          label: "订单编号",
          mode: "orderNo",
          
        },
        {

          width: 100,
          label: "订单类型",
          mode: "type",
          showOverflowTooltip: true,
           options: [
             {
              l: "法律",
              v: 1,
            },
            {
              l: "问答",
              v: 2,
            },
            {
              l: "头条",
              v: 3,
            },
            {
              l: "合同",
              v: 4,
            },
            {
              l: "咨询",
              v: 5,
            },
          ],
        },

        {
          width: 120,
          label: "手机号",
          mode: "phone",
        },
        {
          label: "订单状态",
          mode: "status",
          width: 115,
          effectiveStatus: true,
          options: [
             {
              l: "已关闭",
              v: -1,
            },
            {
              l: "已完成",
              v: 0,
            },
            {
              l: "未支付",
              v: 1,
            },
            {
              l: "已支付",
              v: 2,
            },
            {
              l: "进行中",
              v: 3,
            },
          ],
        },
        {
          width: 120,
          label: "实收金额",
          mode: "amount",
        },
        {
          width: 160,
          label: "创建时间",
          mode: "createdTime",
        },
        
      ],
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10,total:0 },
    
    };
  },
  created(){
    this.getbusinessManageListApifn();
  },
  methods: {
     //获取订单信息
    async getbusinessManageListApifn() {
  
      let { code, rows,total } = await getbusinessManageListApi(this.pageing);
      if (code != 200) return;
      this.tableData = rows;
        this.pageing.total=total

    },
     //获取订单id对应的信息
    async getbusinessManageidlistfn(id) {
      let newdata={
        id:id,
        pageNum:this.pageing.pageNum,
        pageSize:this.pageing.pageSize,
        total:this.pageing.total
      }
      let { code, data } = await getbusinessManageidlist(newdata);
      if (code != 200) return;
      this.infotable = data;
    },
    // 表格行点击了
    RowClickFn(row) {
      console.log(row);
      this.getbusinessManageidlistfn(row.id);
    },
    //状态的判断展示
    status(value){
      const statuslist={
        1:'内容',
        2:'内容',
        3:'内容',
        4:'内容',
        5:'咨询',
      }
      return statuslist[value];
    },

    types(value){
      const typelist={
        1:'法律',
        2:'问答',
        3:'头条',
        4:'内容',
        5:'咨询',
      }
      return typelist[value];
    },
    // 当前页发生改变时
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getbusinessManageListApifn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getbusinessManageListApifn();
    },
      //分类查询
    inquireFn(paramsArr) {
      // 筛选数据
      let { pageing } = this;
      paramsArr.forEach((item) => {
        for (const key in item) {
          this.pageing[key] = item[key];
        }
      });
      pageing.pageNum = 1;
      this.getbusinessManageListApifn();
    },
 
    //重置
    reset() {
      this.form = {
        status: "",
        type: "",
      };
      this.pageing = { pageNum: 1, pageSize: 10,};
    },
  },
};
</script>
<style scoped>
.label-box-content {
  height: 100%;
}
/* 标题筛选 */
.businFilter {
  position: absolute;
  right: 30px;
  top: 10px;
}
>>> .el-form-item {
  width: auto;
  margin-bottom: 0;
}
.businFilter >>> .el-form-item__content {
  width: 160px;
}
.businFilter >>> .left .el-form-item:last-child .el-form-item__content {
  width: 195px;
}
.businFilter >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
>>> .el-input--medium {
  width: 150px !important;
}
.businFilter >>> .container .right {
  margin-top: 0;
}
.el-input-number--mini {
  width: 100px;
}
.el-card >>> .top {
  border-bottom: 0;
  padding-top: 0;
}
.el-card >>> .el-card__body {
  position: relative;
  height: 100%;
}
.el-card >>> .el-card__body > div {
  padding-top: 0 !important;
  height: 92%;
  overflow-y: auto;
}
.corrExpert .el-card >>> .el-card__body > div {
  overflow-y: initial;
}

.el-row,
.el-card {
  height: 100%;
  margin-bottom: 0;
}
.label-box-content >>> h1 {
  margin: 0;
  padding: 20px 0 15px 0;
  border-bottom: 1px solid #e6ebf5;
}
.label-box-content >>> .top::after {
  height: 0;
}
/* 标题筛选 */
.businFilter {
  position: absolute;
  right: 30px;
  top: 10px;
}
>>> .el-form-item {
  width: auto;
  margin-bottom: 0;
}
.businFilter >>> .el-form-item__content {
  width: 160px;
}
.businFilter >>> .left .el-form-item:last-child .el-form-item__content {
  width: 195px;
}
.businFilter >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}
.businFilter >>> .container .right {
  margin-top: 0;
}
/* 信息 */
.infoExpert {
  height: 100%;
}
.el-col-24 {
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6ebf5;
}
.el-descriptions {
font-size: 14px;
}
.el-descriptions-item__label {
  margin-right: 0;
}
.perInfo >>> .el-descriptions__title {
  font-size: 18px;
}
.lineItem {
  margin-bottom: 60px;
}
.lineItem h2 {
  font-size: 20px;
}
.lineItem h2::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem > span {
  display: block;
  font-size: 15px;
  color: #aaa;
  margin-bottom: 10px;
}
.lineItem span::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem .lItemContent {
  font-size: 15px;
  margin-top: 10px;
  line-height: 26px;
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 10px;
}
.lineItem .lItemContent::before {
  font-size: 16px;
  color: #aaa;
}
.lineItem .lItemContent > .lICon-reply {
  padding-left: 1em;
  font-size: 14px;
  color: #888;
  margin-top: 10px;
}

>>> .businTalbe .el-input--medium{
  width: 80px !important;
}
/*信息end */
</style>